<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.1表单组件</title>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>

<form class="layui-form" action="">


    <div class="layui-form-item">

    <!--  行区块结构-->
      <label class="layui-form-label">标签区域</label>
      <div class="layui-input-block">
        原始表单元素区域
      </div>
    </div>

      <br>
      <br>
    <!--  使用块元素包裹-->
      <div class="layui-input-block">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>

      <br>
      <br>
      <div class="layui-input-block">
        <select name="city" lay-verify="required">
          <option value="">请选择一个城市</option>
          <option value="010">北京</option>
          <option value="021" disabled>上海</option>
          <option value="0571" selected>杭州</option>
        </select>
      </div>
      <br>
      <br>

      <div class="layui-input-block">
        <select name="quiz">
          <option value="">请选择</option>
          <optgroup label="城市记忆">
            <option value="你工作的第一个城市">你工作的第一个城市？</option>
          </optgroup>
          <optgroup label="学生时代">
            <option value="你的工号">你的工号？</option>
            <option value="你最喜欢的老师">你最喜欢的老师？</option>
          </optgroup>
        </select>
      </div>

      <br>
      <br>

      <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like[write]" title="写作">
          <input type="checkbox" name="like[read]" title="阅读" checked>
          <input type="checkbox" name="like[dai]" title="发呆">
        </div>
      </div>


      <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
          原始风格：
          <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
          <input type="checkbox" name="" title="发呆" lay-skin="primary">
          <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="xxx" lay-skin="switch">
          <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
          <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
          <input type="checkbox" name="aaa" lay-skin="switch" disabled>
        </div>
      </div>

      <div class="layui-form-item">

        <div class="layui-inline">
          <label class="layui-form-label">范围</label>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
          </div>

          <div class="layui-form-mid">-</div>

          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="password" name="" autocomplete="off" class="layui-input">
          </div>
        </div>

      </div>



</form>
</body>
</html>